<template>
    <div class="nested-draggable">
        <draggable
            v-if="componentData.length > 0"
            :list="componentData"
            tag="transition-group"
            animation="300"
            :itemKey="'123'"
            :componentData="{
                type: 'transition-group',
            }"
        >
        <template #item="{ element, index }">
            <div>
               <div :class="{active: activeId === index}" @click="chooseComp(element, index)">
                <div class="draggable-box">{{ element.label }}
                    <span v-if="element.type === 'xm-tabs'">展开</span>
                </div>
                <!-- <div @click="selectedTab">{{ element.type }}</div> -->
               </div>
               <child-tabs v-if="element.type === 'xm-tabs'" v-bind="element.formData.mainConfig"></child-tabs>
                <!-- <template v-if="element.type === 'xm-tabs'" v-for="tabItem in element.formData.launchList[element.formData.activeLaunchId].componentDetailList" :key="tabItem.sort">
                    <tab-item :item="tabItem"></tab-item>
                </template> -->
            </div>
        </template>
        </draggable>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import draggable from 'vuedraggable'
import TabItem from './tabItem.vue'
import ChildTabs from './childTabs.vue'
interface Props {
    componentData: any
}

const props = defineProps<Props>()
const emits = defineEmits(['chooseComp'])
const activeId = ref(0)
const selectedTab = () => {
    console.log('选择一个tab')
}
const chooseComp = (element:any, idx: number) => {
    activeId.value = idx
    emits('chooseComp', element)
}
</script>
<style>
.nested-draggable {
    /* display: flex;
    padding:20px;
    text-align: left; */
}
.draggable-box {
    border:1px solid #efefef;
    padding: 10px;
    margin: 10px 0;
    cursor: move;
    text-align: left;
}
.active {
    color: red;
}
</style>